Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>The Twelve Days of Christmas</h1>

<div class="wrapper">
  <svg width="500" height="500" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet">
    <path id="spiral" fill="transparent" stroke="transparent" d="M 150,150
              m 0,120
              a 120,120 0 1,0 240,0
              a 140,140 0 1,0 -280,0
              a 160,160 0 1,0 320,0
              a 180,180 0 1,0 -360,0
              a 200,200 0 1,0 400,0
              a 220,220 0 1,0 -440,0" />
    <g class="gift" style="--i: 1;opacity:0;">
      <text>
        <textPath href="#spiral" startOffset="0%" side="right">
          Twelve Drummers Drumming,
        </textPath>
      </text>
    </g>
    <g class="gift" style="--i:2;opacity:0;">
      <text>
        <textPath href="#spiral" startOffset="11%" side="right">
          Eleven Pipers Piping,
        </textPath>
      </text>
    </g>
    <g class="gift" style="--i:3;opacity:0;">
      <text>
        <textPath href="#spiral" startOffset="18.75%" side="right">
          Ten Lords a-Leaping,
        </textPath>
      </text>
    </g>
    <g class="gift" style="--i:4;opacity:0;">
      <text>
        <textPath href="#spiral" startOffset="26.5%" side="right">
          Nine Ladies Dancing,
        </textPath>
      </text>
    </g>
    <g class="gift" style="--i:5;opacity:0;">
      <text>
        <textPath href="#spiral" startOffset="34.5%" side="right">
          Eight Maids a-Milking,
        </textPath>
      </text>
    </g>
    <g class="gift" style="--i:6;opacity:0;">
      <text>
        <textPath href="#spiral" startOffset="43.25%" side="right">
          Seven Swans a-Swimming,
        </textPath>
      </text>
    </g>
    <g class="gift" style="--i:7;opacity:0;">
      <text>
        <textPath href="#spiral" startOffset="53.25%" side="right">
          Six Geese a-Laying,
        </textPath>
      </text>
    </g>
    <g class="gift" style="--i:8;opacity:0;">
      <text>
        <textPath href="#spiral" startOffset="60.75%" side="right">
          Five Golden Rings,
        </textPath>
      </text>
    </g>
    <g class="gift" style="--i: 9;opacity:0;">
      <text>
        <textPath href="#spiral" startOffset="67.5%" side="right">
          Four Calling Birds,
        </textPath>
      </text>
    </g>
    <g class="gift" style="--i:10; opacity:0;">
      <text>
        <textPath href="#spiral" startOffset="74.5%" side="right">
          Three French Hens,
        </textPath>
      </text>
    </g>
    <g class="gift" style="--i:11; opacity:0;">
      <text>
        <textPath href="#spiral" startOffset="81.5%" side="right">
          Two Turtle Doves
        </textPath>
      </text>
    </g>
    <g class="gift" style="--i:12; opacity:0;">
      <text>
        <textPath href="#spiral" startOffset="88%" side="right">
          And a Partridge in a Pear Tree
        </textPath>
      </text>
    </g>
  </svg>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import url(https://fonts.bunny.net/css?family=aladin:400|beau-rivage:400|estonia:400|kavivanar:400|monda:400,600);

* {
  box-sizing: border-box;
}
:root {
  --clr-bg: rgb(237, 229, 215);
  --duration: 700ms;
  --delay: 1700ms;
}

body {
  gap: 2rem;
  background-color: var(--clr-bg);
  font-family: "Estonia", handwriting;
  padding: 1rem;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("https://raw.githubusercontent.com/cbolson/icodethis-challenges/main/assets/backgrounds/bg-xmas-1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  z-index: -10;
}
h1 {
  font-family: "Estonia", handwriting;
  font-size: clamp(1.4rem, 8.5vw - 0.05rem, 3rem);
  margin: 0 auto;
  text-align: center;
}

.wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(100%, 600px);
  display: grid;
  place-content: center;
  grid-template-areas: "stack";
}
.wrapper > * {
  grid-area: stack;
}
.wrapper > svg {
  width: 100%;
  rotate: 90deg;
}
.wrapper > svg text {
  font-size: 3rem;
  stroke: rgb(60, 34, 6);
}
.wrapper > svg > g {
  transition: opacity 500ms;
  opacity: 0;
  animation: fadeIn var(--duration) forwards;
  animation-delay: calc(var(--i) * var(--delay));
  transform-origin: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    rotate: -10deg;
  }
  to {
    opacity: 1;
    rotate: 0deg;
  }
}

.wrapper > .images {
  width: 35%;
  aspect-ratio: 1;
  margin: auto;
  translate: -1em 1em;
  display: grid;
  grid-template-areas: "stack";
}

.wrapper > .images > img {
  grid-area: stack;
  width: 100%;
  scale: 0;
  transition: opacity 500ms ease-in-out;
  animation: reveal-image calc(var(--duration) * 2) forwards;
  animation-delay: calc(var(--i) * var(--delay) + 300ms);
  border-radius: 20px;
}
.wrapper > .images > img:last-child {
  translate: 1rem 0;
  animation: reveal-image-last calc(var(--duration) * 2) forwards;
  animation-delay: calc(var(--i) * var(--delay) + 300ms);
}
@keyframes reveal-image {
  from {
    scale: 0;
  }
  25%,
  75% {
    scale: 1;
  }
  to {
    scale: 0;
  }
}
@keyframes reveal-image-last {
  from {
    scale: 0;
  }
  25%,
  100% {
    scale: 1;
  }
}
svg:has(:hover) + .images > img {
  opacity: 0;
  animation-duration: 0ms;
}
svg:has(g:nth-of-type(1):hover) ~ .images > img:nth-child(1),
svg:has(g:nth-of-type(2):hover) ~ .images > img:nth-child(2),
svg:has(g:nth-of-type(3):hover) ~ .images > img:nth-child(3),
svg:has(g:nth-of-type(4):hover) ~ .images > img:nth-child(4),
svg:has(g:nth-of-type(5):hover) ~ .images > img:nth-child(5),
svg:has(g:nth-of-type(6):hover) ~ .images > img:nth-child(6),
svg:has(g:nth-of-type(7):hover) ~ .images > img:nth-child(7),
svg:has(g:nth-of-type(8):hover) ~ .images > img:nth-child(8),
svg:has(g:nth-of-type(9):hover) ~ .images > img:nth-child(9),
svg:has(g:nth-of-type(10):hover) ~ .images > img:nth-child(10),
svg:has(g:nth-of-type(11):hover) ~ .images > img:nth-child(11),
svg:has(g:nth-of-type(12):hover) ~ .images > img:nth-child(12) {
  scale: 1 !important;
  opacity: 1;
}

Frontend Forever App